{extend name="template/base" /}
{block name="content"}
<div class="page-container">

    <style>
        #actions{
            margin-bottom:15px;
        }
        #orders,#drivers,#groups,#new-group{
            padding-left:0;
            padding-right:0;
        }
        #drivers{
            margin:0 5px;
        }
        .order,.group,.driver{
            /*margin-bottom: 12px;*/

        }
        .panel{
            margin:0 12px;
        }
        .panel-body{
            padding:5px;
        }
        .check-box,.radio-box{
            padding-left:0;
            padding-right:0;
        }
        .order table th,.order table tr td,.driver table th,.driver table tr td，.group table th,.group table tr td,.driver table th,.driver table tr td{
            padding:2px;
        }
        .order .check-box,.driver .radio-box{
            padding:0 5px;
        }

    </style>
    <div class="page-container">
        <div id="actions">
            <!-- 旅客操作 -->

            <input class="btn btn-primary radius" style="display: none;" type="button" id="addPassengerToGroup" value="将旅客加入分组">
            <input class="btn btn-primary radius" style="display: none;" type="button" id="deletePassengerFromGroup" value="将旅客从分组移除">

            <!--司机操作-->
            <input class="btn btn-primary radius" style="display: none;" type="button" id="addDriverToGroup" value="将司机加入分组">
            <input class="btn btn-primary radius" style="display: none;" type="button" id="deleteDriverFromGroup" value="将司机从分组移除">

            <!-- 分组操作 -->
            <input class="btn btn-primary radius" style="display: none;" type="button" id="newGroup" value="生成新分组">
            <input class="btn btn-primary radius" style="display: none;" type="button" id="destoryGroup" value="拆散分组">
        </div>

        <div class="cl">
            <div id="orders" class="panel panel-default  col-md-4 f-l f-12">
                <div class="panel-header">订单</div>
                <div class="panel-body">

                    <div class="panel panel-default order">
                        <div class="panel-header"><span>订单#1</span></div>
                        <div class="panel-body">
                            <table class="table table-border table-bordered table-hover">
                                <thead>
                                    <tr>
                                        <th width="10%">
                                            <div class="check-box">
                                                <input type="checkbox" class="check-all-passengers">
                                            </div>
                                        </th>
                                        <th>旅客</th>
                                        <th>性别</th>
                                        <th>身份证号码</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <div class="check-box">
                                                <input class="passenger"  name="passengers[]" type="checkbox" value="1">
                                            </div>
                                        </td>
                                        <td>张三</td>
                                        <td>男</td>
                                        <td>231212198808092121</td>
                                    </tr>
                                    <tr>
                                        <td><div class="check-box">
                                            <input class="passenger" name="passengers[]" type="checkbox" value="2">
                                        </div></td>
                                        <td>王小明</td>
                                        <td>男</td>
                                        <td>231212198808092121</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                </div>

            </div>
            <div id="drivers" class="panel panel-default col-md-3 f-l f-12">
                <div class="panel-header" >待接单司机</div>
                <div class="panel-body">

                    <div class="panel panel-default driver">
                        <div class="panel-header">
                            <div class="radio-box">
                                <input class="driver"  type="radio" id="driver-1" name="driver">
                                <label for="driver-1">张大力</label>
                            </div>
                        </div>
                        <div class="panel-body">
                            <table class="table table-border table-bordered table-hover">
                                <tbody>
                                <tr>
                                    <th width="30%">手机号码</th>
                                    <td>13590182842</td>
                                </tr>
                                <tr>
                                    <th>车牌</th>
                                    <td>粤b123123</td>
                                </tr>
                                <tr>
                                    <th>座位数</th>
                                    <td>7</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="panel panel-default driver">
                        <div class="panel-header">
                            <div class="radio-box">
                                <input class="driver" type="radio" id="driver-2" name="driver">
                                <label for="driver-2">张大超</label>
                            </div>
                        </div>
                        <div class="panel-body">
                            <table class="table table-border table-bordered table-hover">
                                <tbody>
                                <tr>
                                    <th width="30%">手机号码</th>
                                    <td>12312312313</td>
                                </tr>
                                <tr>
                                    <th>车牌</th>
                                    <td>川a123123</td>
                                </tr>
                                <tr>
                                    <th>座位数</th>
                                    <td>7</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>


                    </div>


                </div>
            </div>
            <div id="groups" class="panel panel-default col-md-4 f-l">
                <div class="panel-header" >分配组</div>
                <div class="panel-body">

                    <div class="panel panel-default group">
                        <div class="panel-header">
                            <div class="check-box">
                                <input type="checkbox" class="group" name="groups[]" value="1">
                                <label for="check-all-group-1">分组#2</label>
                            </div>
                        </div>

                        <div class="panel-body">
                            <table class="table table-border table-bordered table-hover">
                                <thead>
                                    <tr>
                                        <th colspan="2">
                                            <div class="radio-box">
                                                <input class="group-driver"  type="radio" name="group-driver" >
                                                <label for="driver-1">张大力</label>
                                            </div>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <th width="30%">手机号码</th>
                                    <td>12312312313</td>
                                </tr>
                                <tr>
                                    <th>车牌</th>
                                    <td>表格内容</td>
                                </tr>
                                <tr>
                                    <th>座位数</th>
                                    <td>7</td>
                                </tr>
                                </tbody>
                            </table>

                            <table class="table table-border table-bordered table-hover">
                                <thead>
                                <tr>
                                    <th width="10%">

                                    </th>
                                    <th>旅客</th>
                                    <th>性别</th>
                                    <th>身份证号码</th>

                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td><div class="check-box">
                                        <input type="checkbox" class="group-passenger">
                                    </div></td>
                                    <td>张三</td>
                                    <td>男</td>
                                    <td>231212198808092121</td>

                                </tr>
                                <tr>
                                    <td><div class="check-box">
                                        <input type="checkbox" class="group-passenger">
                                    </div></td>
                                    <td>王小明</td>
                                    <td>男</td>
                                    <td>231212198808092121</td>

                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>



                </div>
            </div>
        </div>
    </div>

</div>
{/block}
{block name="script"}
<script>

    $(function(){

        /**
         * 勾选有旅客 可以加入已有分组、可生成新分组
         */
        function passengerHandler(){

            if($("input[type='checkbox'][class='passenger']:checked").length>0){

                $('#addPassengerToGroup').css('display','inline');
                $('#newGroup').css('display','inline');


            }else{

                $('#addPassengerToGroup').css('display','none');
                $('#newGroup').css('display','none');
            }
        }
        $("input[type='checkbox'][class='passenger']").click(passengerHandler);
        $("input[type='checkbox'][class='check-all-passengers']").change(passengerHandler);


        /**
         * 勾选有司机 可以加入已有分组、可生成新分组
         */
        $("input[type='radio'][class='driver']").click(function(){

            if($("input[type='radio'][class='driver']:checked").length>0){

                $('#addDriverToGroup').css('display','inline');
                $('#newGroup').css('display','inline');


            }else{

                $('#addDriverToGroup').css('display','none');
                $('#newGroup').css('display','none');
            }

        });

        /**
         * 勾选有分组 可进行拆散分组操作、可将司机加入分组、可将旅客加入分组
         */

        $("input[type='checkbox'][class='group']").click(function(){

            var _this = this;

            if($("input[type='checkbox'][class='group']:checked").length>0){

                // $('#addPassengerToGroup').css('display','inline');
                // $('#addDriverToGroup').css('display','inline');
                $('#destoryGroup').css('display','inline');
                $('#newGroup').css('display','none');


            }else{

                // $('#addPassengerToGroup').css('display','none');
                $('#destoryGroup').css('display','none');
                // if($('#newGroup').css('display')=='none'){
                //     $('#newGroup').css('display','inline');
                // }else{
                //     $('#newGroup').css('display','none');
                // }
            }

        });

        /**
         * 勾选有分组司机 可移除分组司机
         */
        $("input[type='radio'][class='group-driver']").click(function(){

            if($("input[type='radio'][class='group-driver']:checked").length>0){


                $('#deleteDriverFromGroup').css('display','inline');


            }else{

                $('#deleteDriverFromGroup').css('display','inline');
            }

        });


        /**
         * 勾选有分组旅客 仅可移除分组旅客
         */
        $("input[type='checkbox'][class='group-passenger']").click(function(){

            if($("input[type='checkbox'][class='group-passenger']:checked").length>0){


                $('#deletePassengerFromGroup').css('display','inline');


            }else{

                $('#deletePassengerFromGroup').css('display','none');
            }

        });


        /**
         * 将旅客加入已存在分组
         */
        $('#addPassengerToGroup').click(function(){


            var passengers = [];
            var groupId = 0;

            if($("input[type='checkbox'][class='group']:checked").length==0){

                //$.Huimodalalert('请从订单列表中选择旅客',2000);
                alert('请从订单列表中选择旅客');
                return false;
            }

            if($("input[type='checkbox'][class='group']").length!==1){

                // $.Huimodalalert('请从分组列表中仅选择一个分组',2000);
                alert('请从分组列表中仅选择一个分组');
                return false;
            }



        })

        /**
         * 将旅客从已存在分组移除
         */

        $('#deletePassengerFromGroup').click(function(){

            var groupId = $("input[type='checkbox'][class='group']:checked:first").attr('group-id');
            var passengers = $("input[type='checkbox'][class='group-passenger']:checked").attr('group-passenger');



        });

        /**
         * 将司机加入已存在分组
         */
        $('#addDriverToGroup').click(function(){


        });

        /**
         * 将司机从已存在分组移除
         */

        $('#deleteDriverFromGroup').click(function(){



        });


        /**
         * 将旅客、司机生成新分组
         */

        $('#newGroup').click(function(){



        });


        /**
         * 将分组拆散
         */

        $('#destoryGroup').click(function(){



        });


    });

</script>
{/block}
